<template>
    <div >
        <span class="titleStr">样品管理</span>
        <el-progress :percentage="8"  :show-text="false"></el-progress>
        <span class="describe">
          供应商样品完成入库后，会自动通过其他入库单计入库存</span>
        <p></p>
        <el-form :label-position="labelPosition" label-width="80px" :model="contactInfo" >
            <el-row  class="form-row">
                <el-col :span="7">
                    <el-form-item label="选择供应商" >
                        <el-button  @click="dialogVisible = true" style="width:100%;background-color:  #F0F8FF">选择供应商</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="供应商编码">
                        <el-input v-model="supplier.supplierCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="供应商名称">
                        <el-input v-model="supplier.supplierName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row >
            <el-row  class="form-row">
                <el-col :span="7">
                    <el-form-item label="供应商联系人姓名">
                        <el-input v-model="contactInfo.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="供应商联系人电话">
                        <el-input v-model="contactInfo.phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="是否新品"  style="size: 30px">
                        <template>
                            <el-radio v-model="radio"  label="1" style="transform: scale(1.3)"  @change="showTable = true,showTablee = false"><span style="background-color:greenyellow;color: black">是</span></el-radio>
                            <el-radio v-model="radio"  label="2"  style="transform: scale(1.3)" @change="showTablee = true,showTable=false"><span style="background-color:red;color: black">否</span></el-radio>
                        </template>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span class="titleStr">样品信息</span>
        <el-progress :percentage="8"  :show-text="false"></el-progress>
        <br><br>
        <el-table v-if="showTable" :data="tableDatas" border>
            <el-table-column  label="产品名称">
                <template slot-scope="scope">
                    <input v-model="scope.row.productName" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column label="产品编码">
                <template slot-scope="scope">
                    <input v-model="scope.row.productCode" disabled="true" placeholder="自动生成" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="产品属性">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.productAttribute" placeholder="请选择" :clearable="true"   style="width: 100%">
                        <el-option
                                v-for="attribute in attributes"
                                :key="'attribute:'+attribute.dictCode"
                                :label="attribute.dictLabel"
                                :value="attribute.dictCode">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column  label="产品类型">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.productType" placeholder="请选择" :clearable="true">
                        <el-option
                                v-for="product in products"
                                :key="'product:'+product.dictCode"
                                :label="product.dictLabel"B
                                :value="product.dictCode">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column  label="品牌">
                <template slot-scope="scope">
                    <input v-model="scope.row.productBrand" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="规格型号">
                <template slot-scope="scope">
                    <input v-model="scope.row.productModels" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="单位">
                <template slot-scope="scope">
                    <input v-model="scope.row.priductUnit" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="样品数量">
                <template slot-scope="scope">
                    <input v-model="scope.row.sampleProductNum" style="width: 100%"  @blur="blurPrice(scope.row.id)"/>
                </template>
            </el-table-column>
            <el-table-column  label="样品单价(含税)/元">
                <template slot-scope="scope">
                    <input v-model="scope.row.productUnitPrice" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="样品图片">
                <template slot-scope="scope">
                    <input v-model="scope.row.productName" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="样品总价值/元">
                <template slot-scope="scope">
                    <input v-model="scope.row.totalPrice" style="width: 100%"/>
                </template>
            </el-table-column>
        </el-table>
        <button v-if="showTable" @click="addTableRow">+添加</button>

        <el-table v-if="showTablee" :data="tableDatas">
            <el-table-column >
                <button class="el-icon-coin" @click="selectProduct"  style="width: 100%"></button>

            </el-table-column>
            <el-table-column  label="产品名称" >
                <template slot-scope="scope">
                    <input v-model="scope.row.productName" disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column label="产品编码">
                <template slot-scope="scope">
                    <input v-model="scope.row.productCode" disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="产品属性">

                <template slot-scope="scope">
                    <input v-model="scope.row.productAttribute" disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="产品类型">
                <template slot-scope="scope">
                    <input v-model="scope.row.productType" disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="品牌">
                <template slot-scope="scope">
                    <input v-model="scope.row.productBrand" disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="规格型号">
                <template slot-scope="scope">
                    <input v-model="scope.row.productModels" disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="单位">
                <template slot-scope="scope">
                    <input v-model="scope.row.priductUnit" disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="样品数量">
                <template slot-scope="scope">
                    <input v-model="scope.row.sampleProductNum" style="width: 100%" @blur="blurPrice(scope.row.id)"/>
                </template>
            </el-table-column>
            <el-table-column  label="样品单价(含税)/元">
                <template slot-scope="scope">
                    <input v-model="scope.row.productUnitPrice" style="width: 100%" />
                </template>
            </el-table-column>
            <el-table-column  label="样品图片">
                <template slot-scope="scope">
                    <input v-model="scope.row.productName" style="width: 100%"/>
                </template>
            </el-table-column>
            <el-table-column  label="样品总价值/元">
                <template slot-scope="scope">
                    <input v-model="scope.row.totalPrice"disabled="true" style="width: 100%"/>
                </template>
            </el-table-column>
        </el-table>
        <button v-if="showTablee" @click="addTableRow">+添加</button>
        <br><br>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" >
            <el-row  class="form-row">
                <el-col :span="7">
                    <el-form-item label="样品产品总数"  >
                        <el-input  :disabled="true" v-model="formLabelAlign.totalNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="样品价值总额(含税)/元" >
                        <el-input   :disabled="true" v-model="formLabelAlign.lumpSum"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <div class="block"  >
                        <span class="demonstration" style="padding-right: 40px">邮寄日期</span>
                        <el-date-picker
                                v-model="formLabelAlign.mailingTime"
                                type="date"
                                placeholder="选择日期"
                                style="transform: scale(1.2)">
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row >
            <el-row  class="form-row">
                <el-col :span="7">
                    <el-form-item label="邮寄单号">
                        <el-input v-model="formLabelAlign.mailingCode"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
        >
            <el-table
                    :data="suppliers"
                    style="width: 100%"
                    max-height="250">
                <el-table-column
                        fixed
                        prop="id"
                        label=""
                        width="80">
                    <template v-slot="scope"> <!-- 使用 v-slot 明确作用域 -->
                        <input
                                type="radio"
                                :value="scope.row.id"
                                v-model="radio"
                                @change="handleRadioChange(scope.row.id)"
                                :aria-hidden="true"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                        prop="supplierCode"
                        label="供应商编码"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="supplierName"
                        label="供应商名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="supplierType"
                        label="供应商分类"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="supplierState"
                        label="供应商等级"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="enterTime"
                        label=录入时间
                        width="300">
                </el-table-column>
            </el-table>

        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="clickProduct"
                width="50%"
        >
            <template>
                <el-table
                        :data="productShows"
                        style="width: 100%">


                    <el-table-column
                            prop=""
                            label="产品名称"
                            width="180">

                        <template slot-scope="scope">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox :label="scope.row.id">
                                    <span style="display: none;">{{ scope.row.id }}</span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </template>

                    </el-table-column>
                    <el-table-column
                            prop="productBrand"
                            label="产品品牌"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="productModels"
                            label="规格型号">
                    </el-table-column>
                    <el-table-column
                            prop="priductUnit"
                            label="单位">
                    </el-table-column>
                </el-table>
            </template>
            <span slot="footer" class="dialog-footer">

                 <el-button type="primary" @click="clickButton">确定</el-button>
  </span>
        </el-dialog>

    </div>


</template>

<script>
    import productCategoryRouter from "@/router/productCategory";

    export default {
        data()
        {
            return {
                checkList: [],
                labelPosition: 'right',
                formLabelAlign: {
                    lumpSum:'',
                    totalNumber:'',
                    mailingTime:'',
                    mailingCode:''
                },
                radio:'',
                showTable: false,
                showTablee: false,
                tableDatas:[
                    {
                        productName: '',
                        productCode: '',
                        productAttribute: '',
                        productBrand:'',
                        productType:'',
                        productModels:'',
                        priductUnit:'',
                        productImgsId:'',
                        sampleProductNum:'',
                        productUnitPrice:'',
                        totalPrice:''
                    }
                ],
                suppliers:[{}],
                dialogVisible: false,
                supplier: {
                }, // 存储表格数据
                contactInfo:{},
                input:'',
                attributes:[{}],
                products:[{}],
                clickProduct:false,
                productShows: [
                    {

                    }
                ]
            };
        },
        created() {
            this.selectsupplier();
            this.selsectAttributes();
            this.producs();
        },
        methods:
            {

                async submitForm() {
                    // 构建包含所有要提交数据的请求对象
                    console.log( this.supplier)
                    // const requestData = {
                    //     contactInfo: this.supplier,
                    //     // 这里假设后续也需要把formLabelAlign和tableDatas传递过去，可根据实际后端需求调整
                    //     formLabelAlign: this.formLabelAlign,
                    //     tableDatas: this.tableDatas
                    // };

                    try {
                        const payload = {
                            Supplier: this.supplier,
                            SupplierSampleManagement: this.formLabelAlign,
                            eTables: this.tableDatas
                        };
                        console.log(payload);
                        const response = await this.axios.post("manage/sampleTable/add", payload);
                        console.log(response);
                        // 处理响应
                    } catch (error) {
                        // 处理错误
                    }
                },
                /*数据库字典产品类型*/
                async blurPrice(id) {
                    const index = this.tableDatas.findIndex(tableData => tableData.id === id);
                    if (index!== -1) {
                        const selectedTableData = this.tableDatas[index];
                        selectedTableData.productUnitPrice = parseFloat(selectedTableData.productUnitPrice);
                        selectedTableData.sampleProductNum = parseFloat(selectedTableData.sampleProductNum);
                        selectedTableData.totalPrice = selectedTableData.productUnitPrice * selectedTableData.sampleProductNum;
                        this.formLabelAlign.totalNumber = Number(this.formLabelAlign.totalNumber) + Number(selectedTableData.sampleProductNum);
                        this.formLabelAlign.lumpSum = Number(this.formLabelAlign.lumpSum) + Number(selectedTableData.totalPrice);

                        // 无需手动更新，computed 会自动处理
                    }
                },


                /*数据库字典产品类型*/
                async clickButton() {
                    this.clickProduct=false
                    this.tableDatas=[];
                    for (let item of this.checkList) {
                        // 对于 checklist 中的每个元素的 id
                        let id = item;

                        const selectedProductShow = this.productShows.find(productShow => productShow.id === id);
                        this.tableDatas.push(selectedProductShow);
                    }
                },
                addTableRow() {
                    // 创建一个新的空行数据对象，结构要和已有的行数据对象一致
                    const newRow = {
                        productName: '',
                        productCode: '',
                        productAttribute: '',
                        productBrand:'',
                        productType:'',
                        productModels:'',
                        priductUnit:'',
                        productImgsId:'',
                        sampleProductNum:'',
                        sampleProductPrice:'',
                        total_price:''
                        // 此处补充其他对应列的属性，保持和已有的行数据结构相同
                    };
                    // 将新行数据对象添加到表格数据源数组中
                    this.tableDatas.push(newRow);
                },
                // 其他已有的方法（如producs、selsectAttributes等保持不变）

                async selectProduct() {
                    this.clickProduct=true;
                    const response = await this.$axios.post("manage/select/product", this.supplier);
                    console.log(response)
                    this.productShows = response.data.productShows || [];

                },

                async producs() {
                    const response = await this.$axios.get("manage/scmDictData/dictDataList", {
                        params: { dataType: 'product' }
                    });

                    this.products = response.data.dataType || [];

                },

                async selsectAttributes() {
                    const response = await this.$axios.get("manage/scmDictData/dictDataList", {
                        params: { dataType: 'product_attribute' }
                    });

                    this.attributes = response.data.dataType || [];

                },
                //根据id查找供应商
                handleRadioChange(id) {
                    this.dialogVisible=false;

                    const selectedSupplier = this.suppliers.find(supplier => supplier.id === id);
                    if (selectedSupplier) {
                        //console.log("选中的供应商对象是:", selectedSupplier);
                        // 可以在这里对 selectedSupplier 进行后续操作
                        // 例如：
                        this.supplier = selectedSupplier;
                        this.$axios.get("manage/contactinfo/"+this.supplier.id).then(
                            response=>{
                                this.contactInfo=response.data.contactinfo.contactinfo;
                                console.log(this.contactInfo)
                            }
                        )
                    } else {
                        console.log("未找到对应的供应商对象");
                    }
                },
                //查询所有供应商
                async selectsupplier(){
                    try {
                        const response = await this.$axios.get("manage/supplier/qualifiedSupplierList")
                            .then(response=>{

                                console.log(response);
                                this.suppliers = response.data.suppliers || [];


                            });

                    } catch (error) {
                        console.error("请求失败:", error);
                    }
                },

            },

    }
</script>

<style scoped>

    .form-row {
        margin-bottom:20px; /* 可以根据需要调整边距大小 */
    }

</style>